<template>
	<view class="container">
		<!-- 头部操作区 -->
		<view class="header">
			<view class="title">数据管理</view>
			<view class="header-actions">
				<button class="refresh-btn" @click="refreshData">🔄 刷新</button>
				<button class="add-btn" @click="showAddModal">添加数据</button>
			</view>
		</view>
		
		<!-- 搜索和排序区域 -->
		<view class="filter-area">
			<view class="search-section">
				<input class="search-input" v-model="searchKeyword" placeholder="搜索数据..." @input="onSearchInput" :focus="true" />
				<button class="search-btn" @click="performSearch">🔍</button>
			</view>
			<view class="sort-section">
				<text class="sort-label">排序:</text>
				<picker class="sort-picker" :value="sortFieldIndex" :range="sortFields" range-key="label" @change="onSortFieldChange">
					<view class="sort-display">{{ sortFields[sortFieldIndex].label }}</view>
				</picker>
				<button class="sort-order-btn" @click="toggleSortOrder">
					{{ sortOrder === 'asc' ? '↑' : '↓' }}
				</button>
			</view>
		</view>
		
		<!-- 数据列表 -->
		<view class="data-list">
			<view v-if="dataList.length === 0" class="empty-data">
				<text>暂无数据</text>
			</view>
			
			<view v-for="(item, index) in dataList" :key="item._id" class="data-card">
				<view class="card-header">
					<text class="card-time">{{ formatTime(item.timestamp) }}</text>
					<view class="card-actions">
						<button class="edit-btn" @click="showEditModal(item)">编辑</button>
						<button class="delete-btn" @click="deleteData(item._id)">删除</button>
					</view>
				</view>
				<view class="card-content">
					<view class="data-row">
					<view class="data-item">
						<text class="data-label">环境温度:</text>
						<text class="data-value">{{ item.temperature }}°C</text>
					</view>
					<view class="data-item">
						<text class="data-label">空气湿度:</text>
						<text class="data-value">{{ item.humidity }}%</text>
					</view>
				</view>
				<view class="data-row">
					<view class="data-item">
						<text class="data-label">co2值:</text>
						<text class="data-value">{{ item.ph }}</text>
					</view>
					<view class="data-item">
						<text class="data-label">紫外线强度:</text>
						<text class="data-value">{{ item.uv }}</text>
					</view>
				</view>
				<view class="data-row">
					<view class="data-item">
						<text class="data-label">土壤湿度:</text>
						<text class="data-value">{{ item.soil }}%</text>
					</view>
					<view class="data-item">
						<text class="data-label">降雨量:</text>
						<text class="data-value">{{ item.rain }}mm</text>
					</view>
				</view>
				<view class="data-row">
					<view class="data-item">
						<text class="data-label">光照强度:</text>
						<text class="data-value">{{ item.light }}lux</text>
					</view>
					<view class="data-item">
						<text class="data-label">设备节点:</text>
						<text class="data-value">{{ item.node_id || 'N/A' }}</text>
					</view>
				</view>
				</view>
			</view>
		</view>
		
		<!-- 分页 -->
		<view class="pagination">
			<button class="page-btn" :disabled="currentPage <= 1" @click="prevPage">上一页</button>
			<text class="page-info">{{ currentPage }} / {{ totalPages }}</text>
			<button class="page-btn" :disabled="currentPage >= totalPages" @click="nextPage">下一页</button>
		</view>
		

	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: [],
			currentPage: 1,
			pageSize: 10,
			totalPages: 1,
			totalCount: 0,
			// 自动刷新定时器
			refreshTimer: null,
			// 搜索相关
			searchKeyword: '',
			searchTimer: null,
			// 排序相关
			sortFieldIndex: 0,
			sortOrder: 'desc', // 'asc' 或 'desc'
			sortFields: [
				{ label: '时间', value: 'timestamp' },
				{ label: '温度', value: 'temperature' },
				{ label: '湿度', value: 'humidity' },
				{ label: 'co2值', value: 'ph' },
				{ label: '紫外线', value: 'uv' },
				{ label: '土壤湿度', value: 'soil' },
				{ label: '降雨量', value: 'rain' },
				{ label: '光照强度', value: 'light' }
			]
		}
	},
	
	onLoad() {
		this.checkPermission();
	},
	
	onShow() {
		// 页面显示时启动自动刷新
		this.startAutoRefresh();
	},
	
	onHide() {
		// 页面隐藏时停止自动刷新
		this.stopAutoRefresh();
	},
	
	onUnload() {
		// 页面卸载时停止自动刷新
		this.stopAutoRefresh();
	},
	
	methods: {
		// 权限检查
		checkPermission() {
			const userInfo = uni.getStorageSync('userInfo');
			if (!userInfo || userInfo.role !== 'admin') {
				uni.showModal({
					title: '权限不足',
					content: '只有管理员才能访问数据管理页面',
					showCancel: false,
					success: () => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				});
				return;
			}
			this.loadData();
		},
		
		// 加载数据
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' });
				
				const result = await uniCloud.callFunction({
					name: 'getHistoryData',
					data: {
						queryType: 'getLatest',
						limit: this.pageSize,
						skip: (this.currentPage - 1) * this.pageSize
					}
				});
				
				if (result.result.code === 0) {
					let dataList = result.result.data.dataList;
					
					// 应用搜索过滤
					if (this.searchKeyword.trim()) {
						dataList = this.filterDataByKeyword(dataList);
					}
					
					// 应用排序
					dataList = this.sortData(dataList);
					
					this.dataList = dataList;
					this.totalCount = result.result.data.total;
					this.totalPages = Math.ceil(this.totalCount / this.pageSize);
				} else {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载数据失败:', error);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},
		
		// 手动刷新数据
		async refreshData() {
			try {
				uni.showToast({
					title: '正在刷新...',
					icon: 'loading',
					duration: 1000
				});
				
				// 重置到第一页
				this.currentPage = 1;
				
				// 重新加载数据
				await this.loadData();
				
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 1500
				});
			} catch (error) {
				console.error('刷新数据失败:', error);
				uni.showToast({
					title: '刷新失败',
					icon: 'none'
				});
			}
		},
		
		// 上一页
		prevPage() {
			if (this.currentPage > 1) {
				this.currentPage--;
				this.loadData();
			}
		},
		
		// 下一页
		nextPage() {
			if (this.currentPage < this.totalPages) {
				this.currentPage++;
				this.loadData();
			}
		},
		
		// 跳转到添加页面
		showAddModal() {
			uni.navigateTo({
				url: '/pages/DataEdit/DataEdit'
			});
		},
		
		// 跳转到编辑页面
		showEditModal(item) {
			const params = {
				id: item._id,
				temperature: item.temperature,
				humidity: item.humidity,
				ph: item.ph,
				uv: item.uv,
				soil: item.soil,
				rain: item.rain,
				light: item.light,
				node_id: item.node_id
			};
			
			const queryString = Object.keys(params).map(key => 
				`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
			).join('&');
			
			uni.navigateTo({
				url: `/pages/DataEdit/DataEdit?${queryString}`
			});
		},
		

		
		// 删除数据
		async deleteData(id) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这条数据吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.showLoading({ title: '删除中...' });
							
							const result = await uniCloud.callFunction({
								name: 'deleteData',
								data: { id }
							});
							
							if (result.result.code === 0) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								this.loadData();
							} else {
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							}
						} catch (error) {
							console.error('删除数据失败:', error);
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							});
						} finally {
							uni.hideLoading();
						}
					}
				}
			});
		},
		

		
		// 格式化时间
		formatTime(timestamp) {
			const date = new Date(timestamp);
			return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
		},
		
		// 启动自动刷新
		startAutoRefresh() {
			// 清除已存在的定时器
			this.stopAutoRefresh();
			// 设置30秒自动刷新
			this.refreshTimer = setInterval(() => {
				this.loadData();
			}, 30000);
		},
		
		// 停止自动刷新
		stopAutoRefresh() {
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer);
				this.refreshTimer = null;
			}
		},
		
		// 搜索输入处理（防抖）
		onSearchInput() {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer);
			}
			this.searchTimer = setTimeout(() => {
				this.performSearch();
			}, 500); // 500ms防抖
		},
		
		// 执行搜索
		performSearch() {
			this.currentPage = 1; // 重置到第一页
			this.loadData();
		},
		
		// 根据关键词过滤数据
		filterDataByKeyword(dataList) {
			const keyword = this.searchKeyword.toLowerCase().trim();
			if (!keyword) return dataList;
			
			return dataList.filter(item => {
				// 搜索所有数值字段和时间
				const searchText = [
					item.temperature?.toString(),
					item.humidity?.toString(),
					item.ph?.toString(),
					item.uv?.toString(),
					item.soil?.toString(),
					item.rain?.toString(),
					item.light?.toString(),
					this.formatTime(item.timestamp)
				].join(' ').toLowerCase();
				
				return searchText.includes(keyword);
			});
		},
		
		// 排序数据
		sortData(dataList) {
			const sortField = this.sortFields[this.sortFieldIndex].value;
			const isAsc = this.sortOrder === 'asc';
			
			return [...dataList].sort((a, b) => {
				let valueA = a[sortField];
				let valueB = b[sortField];
				
				// 处理数值类型
				if (typeof valueA === 'number' && typeof valueB === 'number') {
					return isAsc ? valueA - valueB : valueB - valueA;
				}
				
				// 处理字符串类型
				valueA = valueA?.toString() || '';
				valueB = valueB?.toString() || '';
				
				if (isAsc) {
					return valueA.localeCompare(valueB);
				} else {
					return valueB.localeCompare(valueA);
				}
			});
		},
		
		// 排序字段改变
		onSortFieldChange(e) {
			this.sortFieldIndex = e.detail.value;
			this.loadData();
		},
		
		// 切换排序顺序
		toggleSortOrder() {
			this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
			this.loadData();
		}
	}
}
</script>

<style>
/* 苹果设计风格 - 数据管理页面 */
.container {
	padding: 20rpx;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
	position: relative;
}

.container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		radial-gradient(circle at 20% 80%, rgba(0, 122, 255, 0.05) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(52, 199, 89, 0.05) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(255, 149, 0, 0.03) 0%, transparent 50%);
	pointer-events: none;
	z-index: -1;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
	padding: 32rpx;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	position: relative;
	z-index: 1;
}

.title {
	font-size: 40rpx;
	font-weight: 700;
	color: #1d1d1f;
	letter-spacing: -0.5rpx;
}

.header-actions {
	display: flex;
	gap: 16rpx;
	align-items: center;
}

.refresh-btn {
	background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
	color: #fff;
	border: none;
	border-radius: 24rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	font-weight: 600;
	box-shadow: 0 6rpx 20rpx rgba(52, 199, 89, 0.3);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.refresh-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
	transition: left 0.5s ease;
}

.refresh-btn:active::before {
	left: 100%;
}

.refresh-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 3rpx 12rpx rgba(52, 199, 89, 0.2);
}

.add-btn {
	background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
	color: #fff;
	border: none;
	border-radius: 24rpx;
	padding: 20rpx 36rpx;
	font-size: 28rpx;
	font-weight: 600;
	box-shadow: 0 6rpx 20rpx rgba(0, 122, 255, 0.3);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.add-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
	transition: left 0.5s ease;
}

.add-btn:active::before {
	left: 100%;
}

.add-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 3rpx 12rpx rgba(0, 122, 255, 0.2);
}

/* 数据列表 - 苹果风格 */
.data-list {
	position: relative;
	z-index: 1;
}

.data-card {
	margin-bottom: 24rpx;
	padding: 32rpx;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.data-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(90deg, #007aff 0%, #5ac8fa 50%, #34c759 100%);
	border-radius: 24rpx 24rpx 0 0;
}

.data-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
	padding-bottom: 20rpx;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.card-time {
	font-size: 32rpx;
	font-weight: 700;
	color: #1d1d1f;
	letter-spacing: -0.3rpx;
}

.card-actions {
	display: flex;
	gap: 12rpx;
}

.card-content {
	padding: 0;
}

.data-row {
	display: flex;
	margin-bottom: 20rpx;
	gap: 16rpx;
}

.data-row:last-child {
	margin-bottom: 0;
}

.data-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 16rpx;
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(52, 199, 89, 0.03) 100%);
	border-radius: 20rpx;
	border: 1px solid rgba(0, 122, 255, 0.1);
	transition: all 0.3s ease;
	position: relative;
}

.data-item:hover {
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(52, 199, 89, 0.05) 100%);
	transform: translateY(-2rpx);
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.15);
}

.data-label {
	font-size: 24rpx;
	color: #8e8e93;
	margin-bottom: 8rpx;
	font-weight: 500;
	text-align: center;
}

.data-value {
	font-size: 32rpx;
	color: #1d1d1f;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.3rpx;
}

/* 操作按钮 - 苹果风格 */
.edit-btn {
	padding: 12rpx 20rpx;
	background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
	color: white;
	border-radius: 16rpx;
	font-size: 24rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	transition: all 0.3s ease;
	border: none;
	letter-spacing: 0.5rpx;
}

.edit-btn:hover {
	background: linear-gradient(135deg, #0056cc 0%, #4a9eff 100%);
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.4);
}

.edit-btn:active {
	transform: translateY(0);
	box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
}

.delete-btn {
	padding: 12rpx 20rpx;
	background: linear-gradient(135deg, #ff3b30 0%, #ff6b6b 100%);
	color: white;
	border-radius: 16rpx;
	font-size: 24rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
	transition: all 0.3s ease;
	border: none;
	letter-spacing: 0.5rpx;
}

.delete-btn:hover {
	background: linear-gradient(135deg, #d70015 0%, #ff4757 100%);
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 16rpx rgba(255, 59, 48, 0.4);
}

.delete-btn:active {
	transform: translateY(0);
	box-shadow: 0 2rpx 8rpx rgba(255, 59, 48, 0.3);
}

/* 空数据提示 - 苹果风格 */
.empty-data {
	text-align: center;
	padding: 120rpx 40rpx;
	color: #8e8e93;
	font-size: 32rpx;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	margin: 40rpx 0;
	border: 1px solid rgba(0, 0, 0, 0.06);
	position: relative;
}

.empty-data::before {
	content: '📊';
	display: block;
	font-size: 80rpx;
	margin-bottom: 20rpx;
	opacity: 0.6;
}

/* 分页 - 苹果风格 */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0;
	gap: 16rpx;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	margin-top: 24rpx;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.page-btn {
	padding: 16rpx 24rpx;
	background: rgba(0, 122, 255, 0.1);
	color: #007aff;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 122, 255, 0.2);
	min-width: 80rpx;
	text-align: center;
}

.page-btn:hover {
	background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
	color: white;
	transform: translateY(-2rpx);
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

.page-btn:active {
	transform: translateY(0);
	box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.2);
}

.page-btn:disabled {
	background: rgba(142, 142, 147, 0.1);
	color: #8e8e93;
	pointer-events: none;
	border: 1px solid rgba(142, 142, 147, 0.2);
	transform: none;
	box-shadow: none;
}

.page-info {
	font-size: 28rpx;
	color: #1d1d1f;
	font-weight: 500;
	padding: 0 20rpx;
	letter-spacing: 0.3rpx;
}



.form-section {
	margin-bottom: 48rpx;
}

.form-section:last-child {
	margin-bottom: 0;
}

.section-title {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: #1d1d1f;
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 3rpx solid #007aff;
	letter-spacing: -0.3rpx;
	position: relative;
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: -3rpx;
	left: 0;
	width: 60rpx;
	height: 3rpx;
	background: linear-gradient(90deg, #007aff 0%, #5ac8fa 100%);
	border-radius: 2rpx;
}

.form-row {
	display: flex;
	margin-bottom: 24rpx;
	gap: 24rpx;
	align-items: flex-start;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-item-half {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0 8rpx;
}

.form-item-single {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.label {
	display: block;
	margin-bottom: 12rpx;
	font-size: 28rpx;
	color: #1d1d1f;
	font-weight: 600;
	min-width: 160rpx;
	white-space: nowrap;
	overflow: visible;
	letter-spacing: 0.3rpx;
}

.input {
	width: 100%;
	padding: 20rpx 16rpx;
	border: 2rpx solid rgba(0, 122, 255, 0.2);
	border-radius: 16rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10rpx);
	transition: all 0.3s ease;
	min-width: 0;
	flex-shrink: 1;
	color: #1d1d1f;
	font-weight: 500;
	line-height: 1.4;
	text-overflow: ellipsis;
	overflow: visible;
	-webkit-user-select: text;
	user-select: text;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;
}



.input:focus {
	border-color: #007aff;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 6rpx rgba(0, 122, 255, 0.1);
	transform: translateY(-2rpx);
	outline: none;
}

.input::placeholder {
	color: #8e8e93;
	font-weight: 400;
}



.add-btn:active {
	transform: scale(0.95);
	opacity: 0.8;
}

/* 搜索和过滤区域 - 苹果风格 */
.filter-area {
	padding: 24rpx;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	position: relative;
	z-index: 1;
}

.search-section {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 24rpx;
}

.sort-section {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.sort-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #1d1d1f;
	min-width: 80rpx;
}

.search-input {
	flex: 1;
	height: 80rpx;
	padding: 0 24rpx;
	border: 2rpx solid rgba(0, 122, 255, 0.1);
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.9);
	font-size: 28rpx;
	color: #1d1d1f;
	transition: all 0.3s ease;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	-webkit-user-select: text;
	user-select: text;
	pointer-events: auto;
	touch-action: manipulation;
}

.search-input:focus {
	border-color: #007aff;
	background: #fff;
	box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.15);
	transform: translateY(-1rpx);
}

.search-btn {
	height: 80rpx;
	padding: 0 32rpx;
	background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
	color: #fff;
	border: none;
	border-radius: 20rpx;
	font-size: 32rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.25);
	transition: all 0.3s ease;
}

.search-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.15);
}

.sort-picker {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 24rpx;
	border: 2rpx solid rgba(52, 199, 89, 0.1);
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.9);
	font-size: 28rpx;
	text-align: center;
	color: #1d1d1f;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
}

.sort-display {
	font-weight: 500;
}

.sort-order-btn {
	height: 80rpx;
	padding: 0 24rpx;
	background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
	color: #fff;
	border: none;
	border-radius: 20rpx;
	font-size: 32rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(52, 199, 89, 0.25);
	transition: all 0.3s ease;
}

.sort-order-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(52, 199, 89, 0.15);
}
</style>